<html>
    <head>
        <title>HTML 文档结构</title>
        <link rel="stylesheet" href="index.css"/>
    </head>
        <body>
            <div class="main">
                <div class="row">
                        <input class="input" type="text" id="inputtext" onkeyup="keyup('event')"/>
                        <input type="button" class="bt" value="确认1" onclick="handleClick(event)"/>
                        <input type="button" class="bt" id="button2" value="确认2"/>
                </div>
                <div id="todogroup">
                   <!-- <div id="todo0"><input type="checkbox" name="todogroup">吃饭<button type="button" onclick="deletByIndex(0)">删除</button>></div>
                    <div>睡觉</div> -->
                    <!--todo项目-->
                </div>
                <!--<div id="xx" onmouseenter="enter('xx')" id="xx" onmouseleave="leave('xx')">
                <div>11111111</div>
                </div>-->
            </div>
        </body>
        <script lang="javascript">
            
            var intCnt = 0;

            function init(){
                console.log('xxx');
                document.getElementById("button2").onclick = handleClick;
                console.log('xxxxxx');
            }

            function keyup(e){
                console.log(e);
                if(e.keyCode==13)
                    handleClick();
            }

        function handleClick(e){

            console.log('handleClick');

            console.log(e);

            var temp = getValue();

           // var div = document.createElement('div');
           // div.innerText = temp;
           // document.getElementById("todogroup").append(div);
            var div = document.createElement('div');

            document.getElementById("todogroup").innerHTML +=" <div class='item' id='todo"
                +intCnt+"'><input type='checkbox' name='todocheck'><div class='item-value'>"
                +temp+"</div><button class='item-del' type='button' onclick='deletByIndex("
                +intCnt+")'>删除</button></div>";
            document.getElementById("inputtext").value="";
            intCnt++;
           // <div id="todo0"><input type="checkbox" name="todogroup">吃饭<button type="button" onclick="deletByIndex(0)">删除</button>></div>

           // document.getElementById("todogroup").innerHTML += "<div>"+ temp +"</div>"
           // document.getElementById("todogroup").append("<div>"+temp+"</div>");
           // document.getElementsByClassName("main")[0].style="background-color:#333333;";
        }

        function getValue(){
            var temp = document.getElementById("inputtext");
            console.log(temp.value);

            return temp.value;
        }

        function deletByIndex(index){
            document.getElementById("todo"+ index).remove();
        }

        function enter(id){
            document.getElementById(id).style='background-color:#3e3e3e';
        }

        function leave(id){
            document.getElementById(id).style='background-color:#ffffff';
        }
        init();

        </script>
        <style>
            body{
                display:flex;
                justify-content:center;
                align-items:center;
                min-height:100vh;
            }
            .main{
               /* width:300px;
                height:300px; */
                padding: 8px;
                border: 1px solid#333333;
                border-radius:8px;
            }
            .row{
                display:flex;
            }
            .item{
                display:flex;    
                align-items:center;      
                margin:6px;
                padding:3px; 
            }
            .item:hover{
                background-color: #ffffff;
                transform:scale(1.1);
            }
            .item-value{
                flex-grow:1;
                color:#000000;
            }
            .item-del{
                color:aliceblue;
                background-color: blue;
                border-radius:5px;
                border: 1px solid#333333;
                opacity: 0;
            }
            .item:hover .item-del{
                opacity: 1;
            }  
            .input{
                padding:8px;
                border-radius:5px;
                outline:none;
                border:2px solid#333333;
            }
            .input:focus{
                border:2px solid #00d9ff;
                box-shadow: 0px 0px 30px #00d9ff;
            }
            .bt{
                background-color: #ffffff;
                border-radius:5px;
                border: 2px solid#000000;
            }
            </style>
</html>
